<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/echarts.js"></script>
  <style>
    #main {
      width: 300px;
      height: 300px;
      border: thin solid red;
    }
  </style>
</head>

<body>
  <div class="about">
    <div id="main"></div>
  </div>

</body>
<script>
  let mychart = echarts.init(document.getElementById("main"))
  let option = {
    title: {
      text: '主标题'
    },
    tooltip: {//提示框组件，用于配置鼠标滑过或点击图表时的显示框。
      show: true, // 是否显示
      trigger: 'axis', // 触发类型  'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
      axisPointer: { // 坐标轴指示器配置项。
        type: 'cross', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
      },
      // showContent: false, //是否显示提示框浮层，默认显示。
      // triggerOn: 'mouseover', // 触发时机'click'鼠标点击时触发。 
      backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
      borderColor: 'blue', // 提示框浮层的边框颜色。
      borderWidth: 5, // 提示框浮层的边框宽。
      padding: 5, // 提示框浮层内边距，
      textStyle: { // 提示框浮层的文本样式。
        color: '#fff',
        fontStyle: 'normal',
        fontWeight: 'normal',
        fontFamily: 'sans-serif',
        fontSize: 14,
      },
      // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
      // 模板变量有 {a}, {b}，{c}，分别表示系列名，数据名，数据值等
      // formatter: '{a}--{b} 的成绩是 {c}'
      formatter: function (arg) {
        return arg[0].name + '的分数是:' + arg[0].data
      }
    },

    legend: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ]
  }

  mychart.setOption(option)
</script>

</html>